<template>
  <div class='course-visit'>
    <!-- 上面区域 -->
    <div class="top">
      <!-- tab栏 -->
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="课程访问量"
          name="first"
        >
          <div class="box"></div>
        </el-tab-pane>
        <el-tab-pane
          label="课程购买量"
          name="second"
        >
          <div class="box3"></div>
        </el-tab-pane>
      </el-tabs>
      <!--按钮 -->
      <div class="row">
        <el-button
          :class="{active:weekShow}"
          size="mini"
          @click="onDateClick('weekShow')"
        >按周</el-button>
        <el-button
          :class="{active:moothShow}"
          size="mini"
          @click="onDateClick('moothShow')"
        >按月</el-button>
        <el-button
          :class="{active:yearShow}"
          size="mini"
          @click="onDateClick('yearShow')"
        >按年</el-button>
      </div>
      <!-- 选择日期 -->
      <div class="container">
        <div class="block">
          <span class="demonstration"></span>
          <el-date-picker
            v-model="value1"
            :format="format"
            :type="isDate"
            size="small"
            @change="changeweek"
            placeholder="选择周"
          >
          </el-date-picker>
        </div>

      </div>

    </div>
    <!-- 中间区域 -->
    <div class="box1"></div>
    <!-- 底部区域 -->
    <div class="bottom">
      <!-- 访问量表格 -->
      <el-table
        :data="list"
        border
        highlight-current-row
        :header-cell-style="{'text-align':'center',background:'#F5F7FA',color:'#888', height: 60 + 'px'}"
        :cell-style="{'text-align':'center'}"
        :row-style="{height: 50 + 'px'}"
        style="width: 100%"
      >
        <el-table-column
          prop="day"
          label="时间"
          width="200"
        >

        </el-table-column>
        <el-table-column
          :prop="activeName==='first'?'visitNum':'buyNum'"
          :label="activeName==='first'?'访问量':'购买量'"
        >

          <template slot="label">
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {getCourse, getCourseBuy} from '@/api/zzb-course'
  export default {
    name: 'courseVisit',
    components: {},
    props: {},
    data () {
      return {
         activeName: 'first',
          value1:new Date(),
          active:'',
          weekShow:true,
          moothShow:false,
          yearShow:false,
          isShow:false,
          list:[],
          lists:[],
          isDate:'week',
          format:'yyyy 第 WW 周',
          total:0,
          pagesize:10,
          currentPage:1,
          startDate:'',
          endDate:'',
         
          // 课程访问量图表
          options:{            
          tooltip: {
            trigger: 'axis',
            transitionDuration: 0.4,
            borderColor: '#fff',           
            containLabel: true
          },
         lineStyle:{
             color:'#2075f1'
         },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '课程访问量',
              type: 'line',
              stack: '总量',
              data: [],
              smooth: true,
              areaStyle: {
                color: '#f3fffe'
              }
            }
          ]
           },
          
           day:'',
           visitNum:0
       
      }
    },
    computed: {},
    watch: {},
    methods: {
      handleClick (tab, event) {
        // console.log(tab, event);
          this.getList()
          this.drawLine()
      },

      //  周年月按钮切换
      onDateClick(type) {
         if(type==="weekShow") {
             this.weekShow=true,
            this.moothShow=false,
            this.yearShow=false
            this.isShow=true,
            this.isDate='week',
            this.format='yyyy 第 WW 周'
         }else if (type==="moothShow") {
             this.weekShow=false,
              this.moothShow=true,
              this.yearShow=false        
              this.isDate='month',
              this.format='yyyy MM 月'
         }else {
             this.weekShow=false,
              this.moothShow=false,
              this.yearShow=true       
              this.isDate='year',
              this.format='yyyy 年'
         }
         this.changeweek()
      },     

    async  getList() {
         this.options.xAxis.data = []
         this.options.series[0].data = []
        // 使用刚指定的配置项和数据显示图表。
      if (this.activeName === 'first') {
      const { data } = await getCourse({
        startDate: this.startDate,
        endDate: this.endDate
      })
      const res = data.result
      console.log(res)
         // 分页功能
       	var x = (this.currentPage-1)*this.pagesize
				var y = this.currentPage*this.pagesize
				console.log(x,y)
				this.list = res.slice(x,y)
        this.total=res.length
      //  console.log(this.list);
      res.forEach(item => {
        const xAxissss = this.$options.filters['formatDateTwo'](item.day)
        // console.log(xAxissss)
        this.options.xAxis.data.push(xAxissss)
        this.options.series[0].data.push(item.visitNum)
        // this.list=data.result
      })
      
      
    } else {
      const { data } = await getCourseBuy({
        startDate: this.startDate,
        endDate: this.endDate
      })
      const res = data.result
      console.log(res)
      // 分页功能
       	var x = (this.currentPage-1)*this.pagesize
				var y = this.currentPage*this.pagesize
				console.log(x,y)
				this.list = res.slice(x,y)
        this.total=res.length
       // console.log(this.list);
      res.forEach(item1 => {
        const yAxissss = this.$options.filters['formatDateTwo'](item1.day)
        // console.log(xAxissss)
       // console.log(2222)
         this.list=data.result
        this.options.xAxis.data.push(yAxissss)
        this.options.series[0].data.push(item1.buyNum)
      })
      
       this.$nextTick(function() {
        this. drawLine()
      })

    }

      },

      // 获取动态的时间

      // 课程访问量图表
     drawLine () {
       if (this.activeName === 'first') {
      setTimeout(() => {
        var chartDom = document.querySelector('.box')
        var myChart = this.$echarts.init(chartDom)
        // this.loadCourseOnline()
        myChart.setOption(this.options)
      }, 1000)
    }else {
      setTimeout(() => {
        var chartDomTwo = document.querySelector('.box3')
        var myChartTwo = this.$echarts.init(chartDomTwo)
        // this.loadCourseOnline()
        myChartTwo.setOption(this.options)
      },1000)
    }
    },


    // 分页器
    handleSizeChange (newSize) {
       this.pagesize=newSize
       console.log(this.pagesize);
       this.getList()
    },

    // 分页器
    handleCurrentChange (newPage) {
        this.currentPage=newPage
        console.log(this.currentPage);
         this.getList()
    },
     
     // 日期选择器改变事件
     changeweek() {
    if (this.isDate === 'week') {
      var d = new Date(this.value1)
      // 起始日期
      var youWant =
        d.getFullYear() +
        '-' +
        (d.getMonth() + 1 + '').padStart(2, '0') +
        '-' +
        (d.getDate() - 1 + '').padStart(2, '0')
      // this.startDate = youWant

      // 终止日期
      var d2 = new Date(+new Date(this.value1) + 5 * 86400000)
      var youWant2 =
        d2.getFullYear() +
        '-' +
        (d2.getMonth() + 1 + '').padStart(2, '0') +
        '-' +
        (d2.getDate() + '').padStart(2, '0')
      // this.endDate = youWant2
      console.log(youWant, youWant2)
      this.startDate = youWant
      this.endDate = youWant2

      // this.getList()
      // // clearTimeout(timeout)
      // this.drawLine()
      // this.weekChange()
    } else if (this.isDate === 'month') {
      console.log('这是month页面', this.value1)
      const dt = new Date(this.value1)
      const month = dt.getMonth() + 1
      // console.log(month)
      if ([1, 3, 5, 7, 8].includes(month)) {
        // console.log('有三十天')
        this.startDate =
          this.$options.filters['formatDateThree'](this.value1) + '-01'
        this.endDate =
          this.$options.filters['formatDateThree'](this.value1) + '-30'
        // console.log(this.startDate, this.endDate)
       
      } else if (month === 2) {
        // console.log('二月')
        this.startDate =
          this.$options.filters['formatDateThree'](this.value1) + '-01'
        this.endDate =
          this.$options.filters['formatDateThree'](this.value1) + '-28'
        // console.log(this.startDate, this.endDate)
      
      } else {
        // console.log('29天')
        this.startDate =
          this.$options.filters['formatDateThree'](this.value1) + '-01'
        this.endDate =
          this.$options.filters['formatDateThree'](this.value1) + '-29'
        // console.log(this.startDate, this.endDate)
        
      }
      this.getList()
      this.drawLine()
    } else {
      console.log('这是year页面', this.value1)
      const dt = new Date(this.value1)
      const year = dt.getFullYear()
      console.log('这是year页面', year)
      if (year === 2020) {
        this.startDate = '2020-01-01'
        this.endDate = '2020-12-31'
      } else if (year === 2021) {
        this.startDate = '2021-01-01'
        this.endDate = '2021-12-31'
      } else {
        this.options.xAxis.data = []
        this.options.series[0].data = []
        return
      }
     
    }
     this.getList()
     this.drawLine()
  },

      //  第二种方法
      // this.value1 = val
      // var d = new Date(this.value1)
      // // 起始日期
      // var youWant = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + (d.getDate() - 1) 
      // this.startDate = youWant

      // // 终止日期
      // var d2 = new Date(+new Date(this.value1) + 5 * 86400000)
      // var youWant2 = d2.getFullYear() + '-' + (d2.getMonth() + 1) + '-' + d2.getDate()
      // this.endDate = youWant2
      // console.log(this.startDate);
      // console.log(this.endDate);
      // this.getList()
    
    // 时间戳转字符串
    getDateString(stamp) {
      let d = new Date(parseInt(stamp, 0))
      let month =
        d.getMonth() + 1 < 10 ? 0 + '' + (d.getMonth() + 1) : d.getMonth() + 1
      let day = d.getDate() < 10 ? 0 + '' + d.getDate() : d.getDate()
      let hour = d.getHours() < 10 ? 0 + '' + d.getHours() : d.getHours()
      let minute =
        d.getMinutes() < 10 ? 0 + '' + d.getMinutes() : d.getMinutes()
      let second =
        d.getSeconds() < 10 ? 0 + '' + d.getSeconds() : d.getSeconds()
      let dateString =
        d.getFullYear() +
        '-' +
        month +
        '-' +
        day +
        ' ' +
        hour +
        ':' +
        minute +
        ':' +
        second
      return dateString
    }


    },
    created () {
      this.changeweek()
       this.getList()
    },
    mounted () {
      const timeout = setTimeout(()=>{
            this.drawLine()
      },400)
    },
  }
</script>
<style lang='less' scoped>
.course-visit {
  //  height: 1250px;
   position: relative;
   overflow: hidden;
}
.top {
  margin-top: 20px !important;
   width: 1500px;
   height: 414px;
 //  margin: 0 auto;
   background-color: #fff;
   padding: 20px 0 0 20px;
  
  /deep/ .el-tabs {
   
      .el-tabs__item {
      font-size: 15px !important;
     }
     .el-tabs__nav-wrap::after {
       display: none;
     }
   }

  .row {
   position: absolute;
   top: 30px;
   right: 230px;
   margin-right:70px ;
     /deep/ .el-button {
         border:none;         
      } 
      .active {
        background-color: #079fff !important;
        color: #fff;
       }
         
  }

  .box {
   width: 100%;
   height: 414px;
   margin-top: -30px;
  
}

.box3 {
   width: 100%;
   height: 414px;
   margin-top: -30px;
}

  .block {
      position: absolute;
      top: 30px;
      right: 5px;
      margin-right:40px ;
        /deep/ .el-input__inner {
        // height: 30px !important;
         line-height: 30px;
        }
      //  .el-icon-time:before {
      //   line-height: 30px;
      //  }
  }
}

/deep/ .bottom {
  // position: relative;
  margin-top: 50px;
   // width: 1020px;
  padding: 0 60px;

   min-height: 600px;
   background-color: #fff;
   .el-table {
    //   margin-left: 180px;
     .el-table-column {
       text-align: center;
     }
   }
   .el-pagination {
     margin-top: 20px;
     float: right;
    //  right: -120px;
    //  position: absolute;
    margin-bottom: 20px;
   }
}

.box1 {
  width: 1520px;
  height: 10px;
  background-color: #f5f5f5;
  margin-top: 100px;
}

</style>